<template>
  <img
    ref="imgRef"
    alt="avatar"
    :width="size"
    :height="size"
    class="avatar-container"
  />
</template>

<script>
import avatarImg from "@/assets/avatar.svg";
export default {
  name: "Avatar",
  props: {
    url: {
      type: String,
      default: "",
    },
    size: {
      type: Number,
      default: 150,
    },
  },
  mounted() {
    this.lazyLoad();
  },
  methods: {
    lazyLoad() {
      this.$refs.imgRef.src = avatarImg;
      if (!this.url) {
        return;
      }
      const img = new Image();
      img.src = this.url;
      img.onload = () => {
        this.$refs.imgRef.src = this.url || "";
      };
    },
  },
};
</script>

<style scoped>
.avatar-container {
  border-radius: 50%;
}
</style>
